<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
    margin: 0;
    padding: 0;
}
.wrap{
    width: 200px;
    height: 400px;
    margin: 50px auto 0;
}
.wrap form{
    width: 200px;
    height: 200px;
    background-color: #eee;
    background-image: url('./scbg3.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.wrap form input{
    width: 200px;
    height: 200px;
    opacity: 0;
}
.wrap p{
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: lightblue;
    color: lightcoral;
    font-size: 18px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 15px;
}
</style>
</head>
<body>
    
<div class="wrap">
    <form>
        <input type="file" name="upload_img">
    </form>
    <p>上传头像</p>
</div>

<script>
let p = document.querySelector('p')

p.onclick = function (){
    let form = document.querySelector('form')
    let formdata = new FormData(form)
    // 发送ajax请求
    let xhr = new XMLHttpRequest()
    xhr.open('post','http://localhost:8080/goods/upload')
    xhr.send(formdata)
    xhr.onload = function (){
        let json = JSON.parse(xhr.responseText)
        alert(json.msg)
        if (json.code === 1) {
            form.style.backgroundImage = `url(${json.imgurl})`
        }
    }
}


</script>
</body>
</html>